<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汽车信息展示</title>
    <style>
        /* 整体页面布局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 品牌列表区域样式 */
        .brand-list {
            margin: 20px;
        }

        /* 品牌名称样式 */
        .brand-name {
            font-weight: bold;
            margin-bottom: 10px;
        }

        /* 汽车信息列表区域样式 */
        .car-info-list {
            margin: 20px;
        }

        /* 表格样式 */
        .car-info-table {
            width: 100%;
            border-collapse: collapse;
        }

        /* 表格表头样式 */
        .car-info-table th {
            background-color: #f4f4f4;
            padding: 10px;
            text-align: left;
            border: 1px solid #ccc;
        }

        /* 表格数据行样式 */
        .car-info-table td {
            padding: 10px;
            border: 1px solid #ccc;
        }

        /* 单个汽车信息样式（之前的样式可保留作为备用，若有其他需求） */
        .car-info-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
<!-- 汽车品牌名称展示区域 -->
<div class="brand-list">
    <h2>汽车品牌列表</h2>
    <div id="brandNames"></div>
</div>

<!-- 汽车详细信息展示区域 -->
<div class="car-info-list">
    <h2>汽车详细信息</h2>
    <div id="carInfos"></div>
</div>

<script>
    // 发送AJAX请求获取汽车品牌名称并展示
    const brandNamesDiv = document.getElementById('brandNames');
    fetch('http://localhost:8088/dev/car-brands')
        .then(response => response.json())
        .then(brandNames => {
            brandNames.forEach(brandName => {
                const brandNameElement = document.createElement('p');
                brandNameElement.textContent = brandName;
                brandNamesDiv.appendChild(brandNameElement);
            });
        });

    // 发送AJAX请求获取汽车详细信息并展示
    const carInfosDiv = document.getElementById('carInfos');
    fetch('http://localhost:8088/dev/cars')
        .then(response => response.json())
        .then(cars => {
            // 创建表格元素
            const carInfoTable = document.createElement('table');
            carInfoTable.classList.add('car-info-table');

            // 创建表头行
            const tableHeader = document.createElement('tr');
            const brandHeader = document.createElement('th');
            brandHeader.textContent = '品牌';
            const modelHeader = document.createElement('th');
            modelHeader.textContent = '车型';
            const colorHeader = document.createElement('th');
            colorHeader.textContent = '颜色';
            const synopsisHeader = document.createElement('th');
            synopsisHeader.textContent = '简介';
            tableHeader.appendChild(brandHeader);
            tableHeader.appendChild(modelHeader);
            tableHeader.appendChild(colorHeader);
            tableHeader.appendChild(synopsisHeader);
            carInfoTable.appendChild(tableHeader);

            // 遍历每辆车的信息并添加到表格中
            cars.forEach(car => {
                const carInfoRow = document.createElement('tr');
                const brandElement = document.createElement('td');
                brandElement.textContent = car.carname;
                const modelElement = document.createElement('td');
                modelElement.textContent = car.model;
                const colorElement = document.createElement('td');
                colorElement.textContent = car.color;
                const synopsisElement = document.createElement('td');
                synopsisElement.textContent = car.synopsis;
                carInfoRow.appendChild(brandElement);
                carInfoRow.appendChild(modelElement);
                carInfoRow.appendChild(colorElement);
                carInfoRow.appendChild(synopsisElement);
                carInfoTable.appendChild(carInfoRow);
            });

            // 将表格添加到页面的汽车详细信息展示区域
            carInfosDiv.appendChild(carInfoTable);
        });
</script>
</body>

</html>